<script setup lang="ts">
import { useViewSort } from '@/hooks/useViewSort'

function handleClickLeft() {
  uni.navigateBack()
}
const initValue = [
  {
    id: 1,
    name: '本店招牌1',
  },
  {
    id: 2,
    name: '本店招牌2',
  },
  {
    id: 3,
    name: '本店招牌3',
  },
]
const { movableContainerHeight, list, handleDragStart, handleMoving, handleDragEnd } = useViewSort(
  55,
  initValue,
)
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="分类排序" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <wd-notice-bar text="长按拖拽或输入数字，即可排序" prefix="warn-bold" :scrollable="false" />
    <wd-search placeholder="请输入分类名称检索" hide-cancel placeholder-left />
    <view class="movable-container box-border flex-1 overflow-hidden bg-[#F7F9FA] p-4">
      <scroll-view scroll-y class="box-border h-full overflow-hidden" :show-scrollbar="false">
        <movable-area
          :style="{
            height: `${movableContainerHeight}px`,
            width: '100%',
          }"
        >
          <movable-view
            v-for="(item, index) in list"
            :key="item.key"
            :x="0"
            :y="item.y"
            direction="vertical"
            class="w-full"
            @change="handleMoving"
            @touchstart="handleDragStart(index)"
            @touchend="handleDragEnd()"
          >
            <view class="box-border h-[45px] w-full flex items-center rounded-lg bg-white px-4">
              <view class="flex flex-1 items-center">
                <wd-text :text="index + 1" size="14px" color="text-main">
                  <template #suffix>
                    <wd-icon name="arrow-down" size="12px" class="ml-1" />
                  </template>
                </wd-text>
                <view class="ml-4">
                  <wd-text :text="item.name" size="14px" color="#333" />
                </view>
              </view>
              <view class="i-icon-park-outline-align-text-both" />
            </view>
          </movable-view>
        </movable-area>
      </scroll-view>
    </view>
    <view class="bg-white p-2">
      <wd-button type="error" custom-class="w-full" :round="false">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
